<template>
  <div style="height: 100%;background-color:white">
    <div v-if="UTIL.isEmpty(this.pageType)">
      <div style="display: inline-block">
        <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                   @click="goBack">返回
        </el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">详情</span>
        </div>
      </div>
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </div>
    <el-row style="margin-bottom: 10px">
      <el-col :span="14">
        <el-button plain size="small" type="success" @click="newExamKnowledge()">新增知识</el-button>
        <el-button plain size="small" type="success" @click="batchDelExamKnowledge()">批量删除</el-button>
      </el-col>
      <el-col :span="10" style="right: auto">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="knowledge.name" placeholder="请输入知识名" size="small" @keyup.enter.native="getTableData">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance" id="advance" style="padding: 10px; float: right">
            <div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>关联大纲</span>
                </div>
                <div style="display: inline-block">
                  <el-cascader
                    v-model="knowledge.outlineDetailId"
                    :options="options"
                    :props="{value: 'id', label: 'name', multiple: false, checkStrictly: true, emitPath: false}"
                    :show-all-levels="false"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    style="width: 300px;margin-top: 10px"></el-cascader>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>选择时间</span>
                </div>
                <div style="display: inline-block;margin-top: 10px">
                  <el-date-picker
                    v-model="knowledge.createdTime"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    size="small"
                    start-placeholder="开始日期"
                    style="width: 300px;"
                    type="daterange"
                    value-format=" yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="7" :span="9">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="0.8" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="replacement">重 置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" :height="tableHeight" border highlight-current-row stripe style="width: 100%;"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="知识名" min-width="200" prop="name">
        </el-table-column>
        <el-table-column label="知识正文" min-width="150" prop="knowledgeText">
          <template slot-scope="scope">
            <div style="height: 40px;" v-html="scope.row.knowledgeText"/>
          </template>
        </el-table-column>
        <el-table-column label="所属目录" min-width="150" prop="bookCatalogPath"></el-table-column>
        <el-table-column label="关联大纲" min-width="150">
          <template slot-scope="scope">
            <el-cascader
              :disabled="true"
              :options="options"
              :props="cascadeProps"
              :value="scope.row.outlineDetailIdArray"
              size="small"></el-cascader>
          </template>
        </el-table-column>
        <el-table-column label="知识来源" min-width="150" prop="source">
          <template slot-scope="scope">
            <span v-if="1 === scope.row.source ">自建</span>
            <span v-if="2 === scope.row.source " style="color: #FF8C00">2020妇产科学</span>
          </template>
        </el-table-column>
        <el-table-column label="导入者" min-width="100" prop="createdBy"></el-table-column>
        <el-table-column label="导入时间" min-width="150" prop="createdTime"></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="editExamKnowledge(scope.row.id)">编辑</el-link></span>
            <span><el-link type="primary" @click.prevent="showExamKnowledge(scope.row.id)">查看</el-link></span>
            <span><el-link v-if="scope.row.source===2" type="primary"
                           @click.prevent="showBookDetail(scope.row.examBookId,scope.row.bookCatalogItemId)">查看图书</el-link></span>
            <span><el-link type="danger" @click.prevent="del(scope.row.id)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination
          v-if="multiplePages"
          :page-size="knowledge.pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"></el-pagination>
      </div>
    </el-row>
    <el-drawer
      :visible.sync="drawer"
      :show-close="true"
      @close="newCloseDialog"
      size="80%">
      <el-container>
        <el-aside width="200px">
          <div id="menu">
            <MenuItem v-for="item in items" :key="item.name" :item="item" @change-selection="refreshList"></MenuItem>
          </div>
        </el-aside>
        <el-main>
          <div id="main-content" :style={height:minHeight} style="padding: 10px;overflow: auto;">
            <div>
              <div style="font-weight: bold;font-size: 18px">
                <div id="知识名称"/>
                <span>知识名称</span>
              </div>
              <div style="margin: 10px" v-html="this.examKnowledge.name"></div>
            </div>
            <div style="margin-top: 10px">
              <div style="font-weight: bold;font-size: 18px">
                <div id="知识正文"/>
                <span>知识正文</span>
              </div>
              <div style="margin: 10px" v-html="this.examKnowledge.knowledgeText"></div>
            </div>
            <div style="margin-top: 10px">
              <div style="font-weight: bold;font-size: 18px">
                <div id="关联大纲"/>
                <span>关联大纲</span>
              </div>
              <div style="margin: 10px">
                <el-cascader
                  :disabled="true"
                  :options="options"
                  :props="cascadeProps"
                  :value="this.examKnowledge.outlineDetailId"
                  clearable
                  filterable
                  placeholder="请选择"
                  size="small"
                  style="width: 100%;margin-top: 10px"></el-cascader>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>

    </el-drawer>
  </div>

</template>

<script>
import KindEditor from "../kindeditor/KindEditor";
import MenuItem from "../common/MenuItem";

export default {
  components: {
    KindEditor,
    MenuItem
  },
  name: "ShowKnowledgeTable",
  data() {
    return {
      startIndex: 0,
      endIndex: 0,
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      tableData: [],
      totalNum: 0,
      multipleSelection: [],
      multiplePages: true,
      uploadVisible: false,
      newDialogVisible: false,
      options: [],
      subject: [],
      name: '',
      type: '新建',
      cascadeProps: {value: 'id', label: 'name', multiple: true, checkStrictly: true, emitPath: false},
      examKnowledge: {},
      knowledge: {
        outlineDetailId: '',
        examBookId: '',
        createdTime: '',
        name: '',
        currentPage: 1,
        pageSize: 10
      },
      knowledgeDetail: {},
      drawer: false,
      outlineDetailId: '',
      pageType: '',
      bookArticleId: '',
      backEnable: true,
      items: [{
        name: "知识名称",
        selected: true,
      }, {
        name: "知识正文",
        selected: false,
      }, {
        name: "关联大纲",
        selected: false,
      }],
      minHeight: ''
    }
  },
  methods: {
    handleCurrentChange: function (val) {
      this.knowledge.currentPage = val;
      this.getTableData();
    },
    handleSizeChange(value) {
      this.knowledge.pageSize = value;
      this.getTableData()
    },
    refreshList(item) {
      debugger;
      let b = document.getElementById(item.name).offsetTop
      let a = document.getElementById('知识名称').offsetTop
      document.getElementById("main-content").scrollTop = b - a;
      this.setAllItemsUnselected();
      this.setSelectedItem(item);
    },
    setAllItemsUnselected() {
      this.items.forEach(item => {
        item.selected = false;
      });
    },
    setSelectedItem(selectedItem) {
      this.items.forEach(item => {
        if (item.name === selectedItem.name) {
          item.selected = true;
        }
      });
    },
    advanceCancel() {
      this.showAdvance = false;
    },
    replacement: function () {
      this.knowledge.name = ""
      this.knowledge.outlineDetailId = ""
      this.knowledge.createdTime = ""
    },
    goBack() {
      // 说明从大纲列表跳过去的
      if (UTIL.isNotEmpty(this.pageType)) {
        this.$router.push('/examOutline/detail')
      } else {
        this.$router.push("/guideBookTable")
      }
    },
    advanceConfirm() {
      this.getTableData();
      this.showAdvance = false;
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    newCloseDialog() {
      this.newDialogVisible = false
      this.examKnowledge.name = ''
      this.examKnowledge.knowledgeText = ''
      this.examKnowledge.outlineDetailId = ''
      this.type = '新建'
    },
    editExamKnowledge(id) {
      this.$router.push({
          path: '/newExamBookKnowledge',
          query: {
            id: id,
            examOutlineId: this.$route.query.examOutlineId,
            examBookId: this.$route.query.examBookId,
            outlineDetailId: this.$route.query.outlineDetailId,
            type: '编辑'
          }
        }
      )
    },
    newExamKnowledge(id) {
      this.$router.push({
          path: '/newExamBookKnowledge',
          query: {
            id: id,
            examOutlineId: this.$route.query.examOutlineId,
            examBookId: this.$route.query.examBookId,
            outlineDetailId: this.$route.query.outlineDetailId
          }
        }
      )
    },
    batchDelExamKnowledge() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning("请至少选择一条")
        return;
      }
      let ids = this.multipleSelection.map(item => item.id).join(",");
      this.del(ids)
    },
    del(ids) {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/examBook/deletedExamKnowledgeById', {
          params: {
            ids: ids,
            examOutlineId: this.$route.query.examOutlineId,
            examBookId: this.$route.query.examBookId
          }
        }).then(() => {
          this.getTableData()
        })
      })
    },
    showBookDetail: function (bookId, bookCatalogItemId) {
      this.$router.push({
        path: "/bookDetail",
        query: {id: bookId, bookCatalogItemId: bookCatalogItemId}
      })
    },

    showExamKnowledge(id) {
      this.axios.get('/pmph/action/examBook/selectExamKnowledgeById', {
        params: {
          id: id
        }
      }).then((response) => {
        this.examKnowledge = response.data;
        this.drawer = true
      })


    },
    getTableData: function () {
      this.axios.get('/pmph/action/examBook/selectExamKnowledgeList', {
        params: this.knowledge
      }).then((response) => {
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
        this.tableData.forEach((item, idx) => {
          item.outlineDetailIdArray = [item.outlineDetailId]
        })
      })
    },
  },
  created() {
    this.minHeight = CONST.WORKSPACE_HEIGHT - 110 + 'px';

    this.axios.get('/pmph/action/examBook/selectOutlineTree', {
      params: {
        examOutlineId: this.$route.query.examOutlineId
      }
    }).then((response) => {
      this.options = response.data
    })
    // 要点ID
    this.knowledge.outlineDetailId = this.$route.query.outlineDetailId
    // 图书ID
    this.knowledge.examBookId = this.$route.query.examBookId
    // 新增或者编辑知识实体类
    // 方便重新计算知识数量
    this.examKnowledge.examBookId = this.$route.query.examBookId
    this.examKnowledge.examOutlineId = this.$route.query.examOutlineId
    this.examKnowledge.outlineDetailId = this.$route.query.outlineDetailId
    // 从大纲跳过来的
    this.pageType = this.$route.query.pageType
    this.getTableData()
    if (UTIL.isEmpty(this.pageType)) {
      this.tableHeight = CONST.WORKSPACE_HEIGHT - 150;
    } else {
      this.tableHeight = CONST.WORKSPACE_HEIGHT - 240;
    }
  },
  activated() {
    this.getTableData()
  }
}
</script>

<style scoped>

</style>
